<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.js"></script>
    <style>
        .sj{
            border: 1px solid red;
            width: 393px;
            height: 830px;
            background-image: url(./页面2.png);
            /* 插入背景图片 */
            background-size: 100% 100%;
            /* 背景图片铺满整个页面 */
        }
        .body{
            display: flex;
            justify-content: center;
            /* 设置位置居中 */
        }
        #box1{
            border: 1px solid black;
            width: 393px;
            height: 393px;
            margin-top: 25%;
            /* 设置到顶部的距离 */
            display: flex;
            flex-wrap:wrap;
            /* 设置盒子自动换行 */
        }
        #box1>div{
            border: 1px solid pink;
            width: 120px;
            height: 120px;
            margin-left: 2%;
            margin-top: 1%;  
        }
        #xb1,#xb2,#xb3,#xb4,#xb5,#xb6,#xb7,#xb8,#xb9{
            font-size: 50px;
            text-align: center;
            align-content: center;
            justify-content: center;
            /* 42——44文字居中 */
        }
        .yc{
            display: none;
            /* 设置隐藏 */
        }
        #top{
            border: 1px ;
            height: 80px;
            width: 393px;
            display: flex;
            margin-top: 50%;
            font-size: 50px;
            text-align: center;
            align-content: center;
            justify-content: center;
        }
        #top>div{
            height: 60px;
            width: 60px;
            border: 1px solid black;
            margin: auto;
            /* 元素居中 */
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="sj">
            <div id="top">
                <!-- 设置顶部数字查看框 -->
                <div class="t1"></div>
                <div class="t2"></div>
                <div class="t3"></div>
                <div class="t4"></div>
                <!-- 四个盒子类 -->
            </div>
            <div id="box1">
                <!-- 设置玩法框 -->
                <div id="xb1">
                    <!-- '<div>' +getsz+ '</div>' -->
                </div>
                <div id="xb2"></div>
                <div id="xb3"></div>
                <div id="xb4"></div>
                <div id="xb5"></div>
                <div id="xb6"></div>
                <div id="xb7"></div>
                <div id="xb8"></div>
                <div id="xb9"></div>
                <!-- 九个盒子框 -->
            </div>
        </div>
        <input type="button" value="开始" onclick="start" class="start">
        <!-- 设置“开始”按钮 点击事件“start”触发效果 设置“start”类 -->
    </div>
</body>

<script>
    $('.start').click(function(){
        $('#box1>div>div').addClass('yc');
    })
    // 利用类选择器设置点击事件，完成点击效果，利用子代选择器选中，添加类方法“yc”(在样式中设置隐藏效果)

    for(var i=1;i<=9;i++){
        // 设置for循环，规定循环次数
        var getsz = Math.floor(Math.random() * 9 + 1)   //随机获取一个数字，赋值给getsz
        var html = '<div>' +getsz+ '</div>'
        // 定义变量将“getsz”追加在每个小盒子中
        $('#box1>#xb' + i).append(html);
        // 将变量值“getsz”追加在每个小盒子中
    };

    for(var i=1;i<=4;i++){
        var getts = Math.floor(Math.random() * 9 + 1)   //随机获取一个数字，赋值给getsz
        var html = '<div>' +getts+ '</div>'
        $('#top>.t' + i).append(html);
    }
    
</script>
</html>
